<template>
  <a-form-item label="布局方式">
    <a-space direction="vertical">
      <a-radio-group v-model="modelProps.props.layout">
        <a-radio :value="1">表格</a-radio>
        <a-radio :value="2">表单</a-radio>
      </a-radio-group>
    </a-space>
  </a-form-item>
  <a-form-item label="雷达图">
    <a-space direction="vertical">
      <a-switch
        v-model="modelProps.props.showRadar"
        :checkedValue="1"
        :uncheckedValue="2"
      />
    </a-space>
  </a-form-item>
  <template v-if="modelProps.props?.showRadar === 1">
    <a-form-item label="最大值">
      <a-input-number v-model="modelProps.props.max" />
    </a-form-item>
    <a-form-item label="雷达图名称">
      <a-select v-model="modelProps.props.radarLable">
        <a-option
          v-for="item in selectItem?.childrenCtl"
          :key="item.fieldName"
          :value="item.ctlCode"
        >
          {{ item[labelName] }}
        </a-option>
      </a-select>
    </a-form-item>
    <a-form-item label="雷达图数值">
      <a-select v-model="modelProps.props.radarValue">
        <a-option
          v-for="item in selectItem?.childrenCtl"
          :key="item.fieldName"
          :value="item.ctlCode"
        >
          {{ item[labelName] }}
        </a-option>
      </a-select>
    </a-form-item>
  </template>
</template>
<script setup lang="ts">
import { useVModel } from '@vueuse/core';
import useForm from '@/hooks/useForm';
import useControlFormStore from '@/store/controlForm';
const controlFormStore = useControlFormStore();

const labelName = controlFormStore.fieldNames.labelName;
const { selectItem } = useForm();
const props = withDefaults(
  defineProps<{
    props: any;
  }>(),
  {}
);
const emits = defineEmits(['update:props']);
const modelProps = useVModel(props, 'props', emits);
</script>
